<template>
	<div>
		<ul>
			<li class="li_item" v-for="(item, index) in history_arr" :key="index" @click="history_click(item)">
				<i class="iconfont icon-clock"></i>
				<div class="history_item_right">
					<div class="history_search">{{item}}</div>
					<i class="iconfont icon-cuo" @click.stop="delete_history(index)"></i>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props:['history_arr'],
		methods:{
			delete_history(index) {
				this.$emit("delete_history_son", index);
				console.log("emit",index)
			},
			history_click(item) {
				this.$emit("click_history", item);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.li_item{
		display: flex;
		justify-content: left;
		height: 45px;
		.icon-clock{
			padding: 0 15px;
			line-height: 45px;
		}
		.history_item_right{
			display: flex;
			justify-content: space-between;
			flex: 1 auto;
			align-items: center;
			font-size: 14px;
			border-bottom: 1px solid lightgray;
			.icon-cuo{
				width: 32px;
				height: 32px;
				line-height: 32px;
			}
		}
	}
</style>